<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
    <div class="max-w-7xl mx-auto">
      <!-- 头部 -->
      <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">Tailwind CSS 演示</h1>
        <p class="text-lg text-gray-600">展示原子化CSS的强大功能</p>
      </div>

      <!-- 卡片和按钮演示 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
        <div class="card p-6">
          <h2 class="text-2xl font-semibold text-gray-800 mb-4">卡片组件</h2>
          <div class="space-y-4">
            <div class="bg-white rounded-lg shadow-md p-4 border border-gray-200">
              <h3 class="text-lg font-medium text-gray-800 mb-2">基础卡片</h3>
              <p class="text-gray-600">使用Tailwind CSS样式的基础卡片组件。</p>
            </div>
            <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg shadow-lg p-4 text-white">
              <h3 class="text-lg font-medium mb-2">渐变卡片</h3>
              <p>带有渐变背景的卡片，视觉效果更丰富。</p>
            </div>
          </div>
        </div>

        <div class="card p-6">
          <h2 class="text-2xl font-semibold text-gray-800 mb-4">按钮组件</h2>
          <div class="space-y-4">
            <div class="flex flex-wrap gap-3">
              <button class="btn-primary">主要按钮</button>
              <button class="btn-secondary">次要按钮</button>
              <button class="bg-red-500 hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200">
                危险按钮
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 响应式布局 -->
      <div class="card p-6 mb-12">
        <h2 class="text-2xl font-semibold text-gray-800 mb-4">响应式布局</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          <div class="bg-blue-100 p-4 rounded-lg text-center">
            <div class="text-2xl font-bold text-blue-600">1</div>
            <div class="text-sm text-blue-800">响应式列</div>
          </div>
          <div class="bg-green-100 p-4 rounded-lg text-center">
            <div class="text-2xl font-bold text-green-600">2</div>
            <div class="text-sm text-green-800">响应式列</div>
          </div>
          <div class="bg-yellow-100 p-4 rounded-lg text-center">
            <div class="text-2xl font-bold text-yellow-600">3</div>
            <div class="text-sm text-yellow-800">响应式列</div>
          </div>
          <div class="bg-purple-100 p-4 rounded-lg text-center">
            <div class="text-2xl font-bold text-purple-600">4</div>
            <div class="text-sm text-purple-800">响应式列</div>
          </div>
        </div>
      </div>

      <!-- 表单组件 -->
      <div class="card p-6 mb-12">
        <h2 class="text-2xl font-semibold text-gray-800 mb-4">表单组件</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
              <input type="text" class="input-field" placeholder="请输入用户名">
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">邮箱</label>
              <input type="email" class="input-field" placeholder="请输入邮箱">
            </div>
          </div>
          <div class="space-y-4">
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">选择城市</label>
              <select class="input-field">
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
              </select>
            </div>
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-2">消息</label>
              <textarea class="input-field h-24 resize-none" placeholder="请输入消息"></textarea>
            </div>
          </div>
        </div>
      </div>

      <!-- 动画效果 -->
      <div class="card p-6 mb-12">
        <h2 class="text-2xl font-semibold text-gray-800 mb-4">动画效果</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div class="text-center">
            <div class="w-16 h-16 bg-blue-500 rounded-full mx-auto mb-4 animate-bounce"></div>
            <p class="text-sm text-gray-600">弹跳动画</p>
          </div>
          <div class="text-center">
            <div class="w-16 h-16 bg-green-500 rounded-full mx-auto mb-4 animate-pulse"></div>
            <p class="text-sm text-gray-600">脉冲动画</p>
          </div>
          <div class="text-center">
            <div class="w-16 h-16 bg-purple-500 rounded-full mx-auto mb-4 animate-spin"></div>
            <p class="text-sm text-gray-600">旋转动画</p>
          </div>
        </div>
      </div>

      <!-- 交互效果 -->
      <div class="card p-6">
        <h2 class="text-2xl font-semibold text-gray-800 mb-4">交互效果</h2>
        <div class="flex flex-wrap gap-4">
          <button class="bg-gradient-to-r from-pink-500 to-red-500 hover:from-pink-600 hover:to-red-600 text-white px-6 py-2 rounded-lg transition-all duration-300 transform hover:scale-110 hover:shadow-lg">
            悬停放大
          </button>
          <button class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded-lg transition-all duration-300 hover:rotate-3">
            悬停旋转
          </button>
          <button class="bg-green-500 hover:bg-green-600 text-white px-6 py-2 rounded-lg transition-all duration-300 hover:translate-y-1">
            悬停上移
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// Tailwind CSS 演示页面
</script> 